<template>
  <div class="new-tab-page large parkinglot-wrapper">
    <div class="page-main-title">
      设备管理-视频监控
      <i class="return-icon" @click="back"></i>
    </div>
    <div class="actions" v-if="$route.query.isCentralMonitor">
      <a href="javascript:;" class="add-icon" @click="addEnvirnomentGun">
        <i class="el-icon-circle-plus"></i>
        新增环境枪
      </a>
    </div>
    <div class="main-content">
      <el-form :inline="true" class="gun-Form" size="mini" status-icon>
        <div class="gun-box">
          <div
            class="gun-group"
            v-if="parkEquipmentEnvironmentCameraVoList && parkEquipmentEnvironmentCameraVoList.length"
          >
            <div
              class="gun-item"
              v-for="(item, index) in parkEquipmentEnvironmentCameraVoList"
              :key
              item.id
            >
              <div class="name">环境枪{{ parkEquipmentEnvironmentCameraVoList.length - index }}</div>
              <div class="gun-bd">
                <el-form-item label="关联通道：" class="channel-item">
                  <el-select
                    placeholder="请选择关联通道"
                    v-model="item.channelIdList"
                    multiple
                    collapse-tags
                  >
                    <el-option
                      v-for="item in selectOptChannelOpt"
                      :key="item.id"
                      :label="item.entranceName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="视频流地址：" class="video-item">
                  <el-input clearable placeholder="请输入视频流地址" v-model="item.ezvizAfterParam"></el-input>
                </el-form-item>
              </div>
              <div class="delItem-icon" @click="delEnvironmentGunListItem(item, index)">
                <i class="el-icon-close"></i>
              </div>
            </div>
          </div>

          <div class="gun-group" v-if="parkEnvironmentCameraList">
            <div class="gun-item" v-for="(item, index) in parkEnvironmentCameraList" :key="item.id">
              <div class="name">通道枪{{ index + 1 }}</div>
              <div class="gun-bd">
                <el-form-item
                  label="关联通道："
                  class="channel-item"
                >{{ item.equipmentRecognitionCameraName }}</el-form-item>
                <el-form-item label="视频流地址：" class="video-item">
                  <el-input clearable placeholder="请输入视频流地址" v-model.trim="item.ezvizAfterParam"></el-input>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>

        <el-form-item size="medium" class="action-box" label-width="0px">
          <el-button plain type="primary" @click="back">取消</el-button>
          <el-button type="primary" @click="submit">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import pageScript from "./index.js";
export default pageScript;
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
